<template>
	<view class="newsong">
		<h2>推荐音乐</h2>
		<view class="song">
			<view class="gequ" v-for="item in newsong" :key="item.id" @click="sing(item.id)">
				<view class="left">
					<view class="geming">{{item.name}}</view>
					<view class="geshou">{{item.song.artists[0].name}} - {{item.name}}</view>
				</view>
				<view class="right">
					<image src="../../static/zhanting.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {newsong} from '../../api/tuijian/tuijian.js'
	export default {
		data() {
			return {
				newsong:[]
			}
		},
		created() {
			newsong().then(res => {
				this.newsong = res.result
			})
		},
		methods:{
			sing(id){
				this.$emit('sing',id)
			}
		}
	}
</script>

<style lang="scss">
		.newsong{
			width: 100%;
			h2{
				padding-left: 18rpx;
				margin-bottom: 24rpx;
				font-size: 34rpx;
				margin-top: 0px;
				border-left: 4rpx solid #dd001b;
			}
			.song{
				width: 100%;
				.gequ{
					width: 100%;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					.left{
						width: 60%;
						height: 100%;
						// background: yellowgreen;
						margin-left: 20rpx;
						.geming{
							font-size: 34rpx;
						}
						.geshou{
							font-size: 24rpx;
							color: #888;
							margin-top: 20rpx;
						}
					}
					.right{
						width: 20%;
						height: 100%;
						// background-color: pink;
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							width: 44rpx;
							height: 44rpx;
						}
					}
				}
			}
		}
</style>
